<div th:fragment="sidebar" class="pb-sidebar">
    <div class="about panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">关于本站</h3>
        </div>
        <div class="panel-body" style="padding-bottom: 0px">
            <ul>
                <div class="avatar"> <img th:src="${@module.get('sysConfig').SITE_PERSON_PIC}" alt=""></div>
                <p th:text="${@module.get('sysConfig').SITE_PERSON_NAME}" class="abname"></p>
                <p th:text="${@module.get('sysConfig').SITE_PERSON_DESC}" class="abtext"></p>
            </ul>
        </div>
    </div>
    <div class="tag panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">标签云</h3>
        </div>
        <div class="panel-body dict">
            <ul id="box">
                <li th:each="item:${@module.get('tagList')}" class="tag-li"><a style="color: #fff" class="" th:href="@{${'/blog/tag/'+item.id}}" th:text="${item.name}"></a></li>
            </ul>
        </div>

    </div>
    <div class="pb-sidebar-tabs">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#latest" data-toggle="tab">最新文章</a></li>
            <li><a href="#recommend" data-toggle="tab">推荐文章</a></li>
            <li><a href="#hot" data-toggle="tab">点击排行</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="latest">
                <ol class="article-list">
                    <li th:each="item,temp:${@module.get('recentList')}"  class="slide">
                        <span th:class="${'li-icon li-icon-'+(temp.index+1)}" th:text="${temp.index+1}"></span>
                        <a th:text="${item.title}" th:href="${'/blog/article/'+item.id}"></a>
                    </li>
                </ol>
            </div>
            <div class="tab-pane" id="recommend">
                <ol class="article-list">
                    <li th:each="item,temp:${@module.get('recommendedList')}"  class="slide">
                        <span th:class="${'li-icon li-icon-'+(temp.index+1)}" th:text="${temp.index+1}"></span>
                        <a th:text="${item.title}" th:href="${'/blog/article/'+item.id}"></a>
                    </li>
                </ol>
            </div>
            <div class="tab-pane" id="hot">
                <ol class="article-list">
                    <li th:each="item,temp:${@module.get('hotList')}"  class="slide">
                        <span th:class="${'li-icon li-icon-'+(temp.index+1)}" th:text="${temp.index+1}"></span>
                        <a th:text="${item.title}" th:href="${'/blog/article/'+item.id}"></a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class="link panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">友情链接</h3>
        </div>
        <div class="panel-body">
            <ul>
                <li th:each="item:${@module.get('linkList')}"> <a th:href="${item.url}" th:text="${item.name}" target="_blank"></a></li>
            </ul>
        </div>
    </div>
    <div class="webinfo panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">网站信息</h3>
        </div>
        <div class="panel-body">
            <ul>
                <li> <i class="fa fa-file fa-fw"></i> 文章总数：<span th:text="${@module.get('siteInfo').articleCount}"></span> 篇</li>
                <li> <i class="fa fa-tags fa-fw"></i> 标签总数：<span th:text="${@module.get('siteInfo').tagCount}"></span> 个</li>
                <li> <i class="fa fa-folder-open fa-fw"></i> 分类总数：<span th:text="${@module.get('siteInfo').categoryCount}"></span> 个</li>
                <li> <i class="fa fa-comments fa-fw"></i> 留言数量：<span th:text="${@module.get('siteInfo').commentCount}"></span> 条</li>
            </ul>
        </div>
    </div>


    <script>
        function randColor()
        {
            var colorArray = ['#4A4A4A','#428BCA','#5CB85C','#D9534F','#567E95','#B433FF'
                ,'#00ABA9','#B37333','#FF6600','rgb(240, 38, 160)','rgb(210, 101, 63)']
//                var colors = Math.floor(Math.random() * (255 * 255 * 255));
//                colors = colors.toString(16);
//                if( colors.length < 6 )
//                {
//                    colors = '0'+colors;
//                }
            var colorLen = colorArray.length;
            return colorArray[Math.floor(Math.random()*((colorLen-1)-0+1)+0)];
//                return '#'+colors;
        };
        window.onload = function () {
            //获取节点
            var oBox = document.getElementById('box');
            var aList = oBox.getElementsByTagName('a');
            for(var i=0;i<aList.length;i++)
            {
                //设置背景颜色
                aList[i].style.background = randColor();
            };
            console.log(randColor());
        };
    </script>

    <style>
        .dict { margin: 5px 0;clear:both ;text-align:left;font-size:12px;}
        .dict a { display: inline-block; background: #fff; padding: 3px 11px; margin: 3px 1px 0 0; border-radius: 8px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
        .dict a { color: #FFF;text-decoration:none }
        .dict a:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }
    </style>

</div>


